<template>
  <div class="setting">
    <div class="header">
      <SvgIcon name="返回" @click="router.back()" class="left" :size="24" />
      <span class="title">设置</span>
    </div>
    <hr style="border-color:rgba(0, 0, 0, 0.02) ;margin-top: 10px;" />
    <div class="card">

      <div class="device">
        <span class="icon"></span>
        <div class="content">
          <p>Lenovo Storage AI</p>
          <p>设备ID：{{ port.device_id }}</p>
        </div>
      </div>
      <hr style="width: 100%; border-color:rgba(0, 0, 0, 0.02) ;" />
      <div class="type">
        <span>连接方式</span>
        <span>{{connectionFlag}}</span>
      </div>
      <div class="wifi" v-if="connectionFlag === 'WIFI'">
        <span>WI-FI</span>
        <span>{{wifiName}}</span>
      </div>
    </div>
    <div class="editPassword">
      <div class="item" @click="openOverlay(1)">
        <SvgIcon style="margin-right:10px " name="wifi" :size="18" />
        <span class="text">Wi-Fi网络配置</span>
        <SvgIcon name="右" :size="20" style="color: #CCCCCCCC;" />
      </div>
      <van-divider style="width: 100%;" />
      <div class="item" @click="openOverlay(0)">
        <SvgIcon style="margin-right:10px " name="钥匙" :size="18" />
        <span class="text">修改登录密码</span>
        <SvgIcon name="右" :size="20" style="color: #CCCCCCCC;" />
      </div>
    </div>

    <div @click="outLogin" class="outlogin">
      退出登录
    </div>
    <van-overlay :show="showChangePassword">
      <ChangePassword v-if="isOverlay === 0" @close="showChangePassword = false"></ChangePassword>
      <wifiList v-if="isOverlay === 1" @change="change" @close="showChangePassword = false"></wifiList>
      <wifiPassword v-if="isOverlay === 2" @close="showChangePassword = false" :wifiItem = "wifiItem"></wifiPassword>
    </van-overlay>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import { wifiInfo } from "@/api/index";
import { usePortStore } from '@/stores/index'
import ChangePassword from './components/ChangePassword.vue'
import wifiList from './components/wifiList.vue'
import wifiPassword from './components/wifiPassword.vue'
import { ref,onMounted } from "vue"
const { port, setPort } = usePortStore()
const router = useRouter()
const wifiItem = ref()
const showChangePassword = ref(false)
const isOverlay = ref(0)
const connectionFlag = ref('未连接')
const wifiName = ref('')
const outLogin = () => {
  setPort({})
  router.push('/login')
}
onMounted(async()=>{
  const {data,code} = await wifiInfo();
  if(code == 200){
    connectionFlag.value = "WIFI"
    wifiName.value = data.mode
  }else{
    connectionFlag.value = "未连接"
  }

})
const change = (item) => {
  wifiItem.value = item
  isOverlay.value = 2
}
const openOverlay = (is) => {
  showChangePassword.value = true
  isOverlay.value = is

}
</script>

<style lang="scss" scoped>
.setting {
  position: relative;
  padding: 16px;
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;



    .left {
      margin-left: 16px;
      float: left;
      // margin-right: auto;
    }

    .title {
      width: 100%;
      text-align: center;
      font-size: 17px;
      margin-right: 40px;
    }
  }

  .card {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #FFF;
    margin-top: 16px;
    margin-bottom: 16px;

    .device {
      display: flex;
      align-items: center;

      .icon {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        background: url('@/assets/image/发送.png') no-repeat center;
      }

      .content {

        p {
          &:nth-child(1) {
            color: #191919;
            font-family: "PingFang SC";
            font-size: 14px;
          }

          &:nth-child(2) {
            color: #666;
            font-family: "PingFang SC";
            font-size: 12px;
          }
        }
      }
    }

    .type,
    .wifi {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      span {
        &:nth-child(1) {
          color: #191919;
          font-family: "PingFang SC";
          font-size: 14px;
        }

        &:nth-child(2) {
          color: #666;
          font-family: "PingFang SC";
          font-size: 12px;
        }
      }
    }
  }

  .editPassword {
    display: flex;
    // height: 52px;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px;
    background: #FFF;
    flex-wrap: wrap;

    .item {
      width: 100%;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    :deep(.van-divider) {
      margin: 0;
    }

    .text {
      color: #191919;
      font-family: "PingFang SC";
      font-size: 14px;
      margin-right: auto;
    }
  }

  .outlogin {
    position: absolute;
    display: flex;
    width: 343px;
    padding: 16px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: #FFF;
    bottom: 50px;
    color: #F04D58;
    font-family: "PingFang SC";
    font-size: 14px;
  }
}
</style>
